<template>
    <section class="page-content">
        <div class="toolbar">
            <el-form :inline="true" :model="params">
                <el-form-item label="资讯标题">
                    <el-input v-model="formData.title" size="small" placeholder="资讯标题"></el-input>
                </el-form-item>
                <el-form-item label="资讯分类">
                    <el-select v-model="formData.category_id" size="small" placeholder="资讯分类">
                        <el-option
                                label="全部"
                                value="">
                        </el-option>
                        <el-option-group
                                v-for="group in categories"
                                :key="group.name"
                                :label="group.name">
                            <el-option
                                    v-for="item in group.children"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-option-group>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="mini" icon="search" @click="onSubmit">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" size="mini" icon="plus" @click="jump">新增</el-button>
                </el-form-item>
                <el-form-item v-if="multipleSelection.length > 0">
                    <el-button type="danger" size="mini" icon="plus" @click="multipleDelete">批量删除</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table
                v-loading="loading"
                :data="tableData.data"
                @sort-change="sort"
                border
                @selection-change="handleSelectionChange"
        >
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="id"
                    width="80"
                    sortable
                    label="ID">
            </el-table-column>
            <el-table-column
                    prop="title"
                    width="300"
                    sortable
                    label="标题">
            </el-table-column>
            <el-table-column
                    prop="category.name"
                    label="分类">
            </el-table-column>
            <el-table-column
                    prop="pv"
                    sortable
                    width="100"
                    label="点击数">
            </el-table-column>
            <el-table-column
                    prop="created_at"
                    sortable
                    label="创建日期"
                    width="180">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    width="150"
                    label="操作">
                <template slot-scope="scope">
                    <el-button
                            @click.native.prevent="editRow(scope.row)"
                            type="default"
                            size="mini">
                        编辑
                    </el-button>
                    <el-button
                            @click.native.prevent="deleteRow(scope.row)"
                            type="danger"
                            size="mini">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block toolbar">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="tableData.current_page"
                    :page-sizes="[10, 20, 30, 50]"
                    :page-size="parseInt(tableData.per_page)"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="tableData.total">
            </el-pagination>
        </div>
    </section>
</template>
<script>
import {generateUrl} from '@/utils/helpers'
export default {
  data () {
    return {
      loading: false,
      categories: '',
      multipleSelection: [],
      tableData: {
        first_page_url: '',
        from: '',
        to: '',
        last_page: '',
        last_page_url: '',
        next_page_url: '',
        prev_page_url: '',
        path: '',
        per_page: 0,
        total: 0,
        data: []
      },
      formData: {
        category_id: '',
        title: ''
      },
      params: {
        order_by: 'id',
        order_type: 'desc',
        page_size: 20,
        category_id: '',
        title: '',
        page: 1
      }
    }
  },
  mounted () {
    this._getData('/posts')
    this._getCategories()
  },
  watch: {
    params: {
      deep: true,
      handler (newValue) {
        this._getData(generateUrl('/posts', newValue))
      }
    }
  },
  methods: {
    deleteRow (row) {
      this.loading = true
      this.$http.delete('/posts/' + row.id).then((response) => {
        this.loading = false
        this.$message.success('删除成功')
        this._getData()
      }).catch((error) => {
        this.loading = false
        console.log(error)
      })
    },
    multipleDelete () {
      console.log(this.multipleSelection)
    },
    editRow (item) {
      this.$router.push('/post/edit/' + item.id)
    },
    onSubmit () {
      this.params.category_id = this.formData.category_id
      this.params.title = this.formData.title
    },
    handleSizeChange (val) {
      this.params.page_size = val
    },
    handleCurrentChange (val) {
      this.params.page = val
    },
    sort (data) {
      let orderType = ''
      if (data.order === 'ascending') {
        orderType = 'asc'
      }
      if (data.order === 'descending') {
        orderType = 'desc'
      }
      this.params.order_type = orderType
      this.params.order_by = data.prop
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    jump () {
      this.$router.push('/post/create')
    },
    _getData (url) {
      url = generateUrl(url, this.params)
      this.loading = true
      this.$http.get(url).then((response) => {
        this.loading = false
        this.tableData = response.data
      }).catch((error) => {
        this.loading = false
        console.log(error)
      })
    },
    _getCategories () {
      this.$http.get('/categories?belongs_to=post').then((response) => {
        this.categories = response.data
      }).catch((error) => {
        console.log(error)
      })
    }
  }
}
</script>
